<template>
  <div class="api-test">
    <a-row :gutter="16">
      <!-- 左侧Tab -->
      <a-col :span="6">
        <a-card :bordered="false">
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            @select="handleSelect"
          >
            <a-menu-item key="merchant-id">
              <template #icon>
                <idcard-outlined />
              </template>
              生成商户ID
            </a-menu-item>
            <a-menu-item key="sign">
              <template #icon>
                <safety-outlined />
              </template>
              生成签名
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-col>

      <!-- 右侧内容 -->
      <a-col :span="18">
        <a-card :bordered="false">
          <!-- 生成商户ID -->
          <div v-if="selectedKeys[0] === 'merchant-id'">
            <h2 class="mb-4">生成商户ID</h2>
            <a-button type="primary" @click="handleGenerateMerchantId">
              生成商户ID
            </a-button>
            <div class="mt-4">
              <a-alert
                type="success"
                message="21cc85d7df7e4981acc42e324d6b2d83"
                show-icon
              />
            </div>
          </div>

          <!-- 生成签名 -->
          <div v-if="selectedKeys[0] === 'sign'">
            <h2 class="mb-4">生成签名</h2>
            <a-form layout="vertical">
              <a-form-item label="商户ID">
                <a-input-group compact>
                  <a-input v-model:value="signForm.merchantId" placeholder="请输入商户ID" style="width: calc(100% - 32px)" />
                  <a-button @click="refreshMerchantId">
                    <template #icon><reload-outlined /></template>
                  </a-button>
                </a-input-group>
              </a-form-item>
              <a-form-item label="时间戳">
                <a-input-group compact>
                  <a-input v-model:value="signForm.timestamp" placeholder="请输入时间戳" style="width: calc(100% - 32px)" />
                  <a-button @click="refreshTimestamp">
                    <template #icon><reload-outlined /></template>
                  </a-button>
                </a-input-group>
              </a-form-item>
              <a-form-item label="随机数">
                <a-input-group compact>
                  <a-input v-model:value="signForm.nonce" placeholder="请输入随机数" style="width: calc(100% - 32px)" />
                  <a-button @click="refreshNonce">
                    <template #icon><reload-outlined /></template>
                  </a-button>
                </a-input-group>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handleGenerateSign">
                  生成签名
                </a-button>
              </a-form-item>
            </a-form>
            <div class="mt-4">
              <a-alert
                v-if="sign"
                type="success"
                :message="sign"
                show-icon
              />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { generateMerchantId } from '../api/merchant'
import {
  IdcardOutlined,
  SafetyOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

// 常量配置
const CONSTANTS = {
  MERCHANT_ID: '21cc85d7df7e4981acc42e324d6b2d83',
  TIMESTAMP: '1747445195648',
  NONCE: 'i23spp461r7',
  SIGN: 'SWXYQ0ZKFKRIC/OTGPU87TMUREPHMGBEB/ZKJGCHGQE='
}

// 选中的Tab
const selectedKeys = ref(['merchant-id'])

// 商户ID
const merchantId = ref(CONSTANTS.MERCHANT_ID)

// 签名表单
const signForm = ref({
  merchantId: CONSTANTS.MERCHANT_ID,
  timestamp: CONSTANTS.TIMESTAMP,
  nonce: CONSTANTS.NONCE
})
const sign = ref('')

// 刷新时间戳
const refreshTimestamp = () => {
  signForm.value.timestamp = Date.now().toString()
}

// 刷新随机数
const refreshNonce = () => {
  signForm.value.nonce = Math.random().toString(36).substring(2, 15)
}

// 刷新商户ID
const refreshMerchantId = async () => {
  try {
    const id = await generateMerchantId()
    signForm.value.merchantId = id
    message.success('刷新商户ID成功')
  } catch (error) {
    message.error('刷新商户ID失败')
  }
}

// 处理Tab选择
const handleSelect = ({ key }: { key: string }) => {
  selectedKeys.value = [key]
}

// 生成商户ID
const handleGenerateMerchantId = async () => {
  try {
    const response = await fetch('/api/merchant/generate-id')
    const data = await response.json()
    if (data.merchantId) {
      merchantId.value = data.merchantId
      // 自动填充到签名表单
      signForm.value.merchantId = data.merchantId
    }
  } catch (error) {
    message.error('生成商户ID失败')
  }
}

// 生成签名
const handleGenerateSign = async () => {
  try {
    const response = await fetch('/api/merchant/generate-sign', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(signForm.value)
    })
    const data = await response.json()
    if (data.sign) {
      sign.value = data.sign
    }
  } catch (error) {
    message.error('生成签名失败')
  }
}

// 页面加载时初始化
onMounted(() => {
  // 初始化代码
})
</script>

<style scoped>
.api-test {
  padding: 24px;
}
.mt-4 {
  margin-top: 16px;
}
.mb-4 {
  margin-bottom: 16px;
}
.text-center {
  text-align: center;
}
</style>